<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <title>人人点评</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./css/element.css">
    <link href="./css/main.css" rel="stylesheet">
    <link href="./css/editName.css" rel="stylesheet">
    <style type="text/css">
        .login_number {
            margin-top: 5px;
            height: 60px;
            line-height: 45px;
        }

        .login_number textarea {
            font-size: 15px;
            resize: none;
            border: none;
            width: 100%;
            height: 100%;
            outline: none;
            border: dashed burlywood;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="header">
            <div class="header-back-btn" @click="goBack"><i class="el-icon-arrow-left"></i></div>
            <div class="header-title">编辑个人介绍&nbsp;&nbsp;&nbsp;</div>
            <div>
                <div class="header-commit-btn" @click="submitIntroduce">保存</div>
            </div>
        </div>
        <div class="edit-container">
            <div class="login_number">
                <textarea placeholder="介绍一下你自己吧。。。" rows="2" cols="30" maxlength="50" v-model="info.introduce">
                </textarea>
            </div>
            <foot-bar :active-btn="4"></foot-bar>
        </div>
    </div>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <!-- 引入组件库 -->
    <script src="./js/element.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/footer.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                user: "",
                info: {},
            },
            created() {
                this.checkLogin();
            },
            methods: {
                checkLogin() {
                    // 查询用户信息
                    axios.get("/user/me")
                        .then(({ data }) => {
                            this.user = data;
                            this.info = JSON.parse(sessionStorage.getItem("userInfo")) || {}
                            // this.queryIntroduce(data.id);
                        })
                        .catch(err => {
                            this.$message.error(err);
                            setTimeout(() => location.href = "login.html", 1000)
                        })
                },
                // queryIntroduce(id) {
                //     axios.get("/userInfo/queryIntroduceById/" + id)
                //         .then(res => {
                //             this.introduce = res.data
                //         })
                //         .catch(err => {
                //             this.$message.error(err);
                //         })
                // },
                goBack() {
                    history.back();
                },
                submitIntroduce() {
                    axios.post("/userInfo/updateIntroduce", this.info)
                        .then(res => {
                            location.href = "info-edit.html";
                        })
                        .catch(this.$message.error)
                }
            },

        })
    </script>
</body>

</html>